<template>
  <div class="demo-form-inline form">
    <el-form v-bind="formColumns" :model="value">
        <template v-for="(item,index) in formColumns.columns">
          <el-form-item v-bind="item" v-if="item.type==='input'" :key="index">
            <el-input v-model.trim="value[item.prop]" :placeholder="item.placeholder"></el-input>
          </el-form-item>
          <el-form-item v-bind="item" v-else-if="item.type === 'select'" :key="index">
            <el-select v-model="value[item.prop]">
              <el-option v-for="(item,index) in item.option" v-bind="item" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item  v-if="item.type === 'action'" :key="index" v-bind="item">
            <!-- v-has="'user-query'" -->
            <el-button v-for="(item,index) in item.list" :key="index" v-bind="item"  @click="handleFormAction(item.action)">{{item.text}}</el-button>
          </el-form-item>
        </template>
    </el-form>
  </div>
</template>

<script>
export default {
  props: ['formColumns','value'],
  data() {
    return {
    };
  },
  methods: {
    handleFormAction(action) {
      if (action !== 'reset') {
        this.$emit('handleFormAction',action);
      } else if (action == 'reset') {
        this.$refs[this.formColumns.ref].resetFields();
        this.$emit('handleResetForm');
      }
    },
  },
  
};
</script>

<style>

</style>
